function getindex(num) {
    var url = `http://localhost:3000/v1/jd/jd_hotel_detail/${num}`
    $.get(url, data => {
        console.log(data)
        $('.middle>ul').html(
            data.data.map(value => {
                const { pic, hname, s_rate, price, rate, place } = value
                return `
                <li>
                    <div class="img">
                        <img src="${pic}" alt="">
                    </div>
                    <p>${hname}</p>
                    <div class="rate"><div class="start_box"></div>|<span>${rate}</span></div>
                    <div class="price"><p>${price}</p>元起</div>
                </li>
                `
            })
        )
        data.data.map((value, index) => {
            // console.log(value.s_rate)
            // $('.middle>ul>li>.rate>.start_box').empty()
            for (var i = 0; i < value.s_rate; i++) {
                $('.middle>ul>li').eq(index).children('.rate').children('.start_box').append(
                    `
                    <img src="https://common3.qyerstatic.com/hotel/desktop/hotel_home/img/star.svg" alt="">
                    `
                )

            }
        })
        console.log($('.middle>ul>li'))
    })
}
var url = 'http://localhost:3000/v1/jd/jd_Hotel'
$.get(url, data => {
    console.log(data)
    $('.container>.main>.header>ul').html(
        data.data.map(value => {
            const { place, city_data_price, city_data_rate, city_data_garde, qy_data_price, qy_data_rate, qy_data_grade } = value
            return `
            <li>${place}</li>
            `
        })
    ),
        $('.container>.main>.header>.data').html(
            data.data.map(value => {
                const { place, city_data_price, city_data_rate, city_data_grade, qy_data_price, qy_data_rate, qy_data_grade } = value
                return `
            <div class="city">
                    <div class="top">
                    <img src="//common3.qyerstatic.com/hotel/desktop/hotel_home/img/area.svg" alt="">
                        <span>${place}平均数据</span>
                    </div>
                    <div class="bottom">
                        <ul>
                            <li>
                                <div class="num"><span>${city_data_price}</span>元</div>
                                <div class="text">价格</div>
                            </li>
                            <li>
                                <div class="num"><span>${city_data_rate}</span></div>
                                <div class="text">星级</div>
                            </li>
                            <li>
                                <div class="num"><span>${city_data_grade}</span></div>
                                <div class="text">评分</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="user">
                    <div class="top">
                    <img src="//common3.qyerstatic.com/hotel/desktop/hotel_home/img/qyer.svg" alt="">
                        <span>穷游用户主流数据</span>
                    </div>
                    <div class="bottom">
                        <ul>
                        <li>
                            <div class="num"><span>${qy_data_price}</span>元</div>
                            <div class="text">价格</div>
                        </li>
                        <li>
                            <div class="num"><span>${qy_data_rate}</span></div>
                            <div class="text">星级</div>
                        </li>
                        <li>
                            <div class="num"><span>${qy_data_grade}</span></div>
                            <div class="text">评分</div>
                        </li>
                        </ul>
                    </div>
                </div>
            `
            })
        ),
        $('.container>.main>.header>.text').html(
            data.data.map(value => {
                const { place, city_data_price, city_data_rate, city_data_garde, qy_data_price, qy_data_rate, qy_data_grade } = value
                return `
                <div class="text">
                <p>数据结论:</p><span>在${place}酒店选择上，穷游用户更偏爱星级高、评分高的住宿体验。</span>
            </div>
                `
            })
        )
    $('.main>.header>ul>li').eq(0).addClass('active')
    $('.main>.header>.data>.user').eq(0).addClass('active')
    $('.main>.header>.data>.city').eq(0).addClass('active')
    $('.main>.header>.text>.text').eq(0).addClass('active')

    $('.main>.header>ul>li').click(function () {
        $(this).addClass('active').siblings().removeClass('active')
        var i = $(this).index()
        $('.main>.header>.data>.user').eq(i).addClass('active').siblings('.user').removeClass('active')
        $('.main>.header>.data>.city').eq(i).addClass('active').siblings('.city').removeClass('active')
        $('.main>.header>.text>.text').eq(i).addClass('active').siblings().removeClass('active')
        var num = i + 1
        getindex(num)
    })
})
var url = 'http://localhost:3000/v1/jd/movie_place'
$.get(url, data => {
    console.log(data)
    $('#body .main>.middle>.movie-place>ul').html(
        data.data.map(value => {
            return `
            <li>
                        <img src="${value.pic}" alt="">
                        <div>
                            <p>${value.cname}</p>
                            <span>${value.ename}</span>
                        </div>
                    </li>
            `
        })
    )
})
var url = 'http://localhost:3000/v1/jd/hot_country_hotel'
$.get(url, data => {
    console.log(data)
    $('#body .hot-country-hotel>ul').html(
        data.data.map(value => {
            return `
            <li> ${value.cname}</li>
            `
        })
    )
})
var url = 'http://localhost:3000/v1/jd/hot_city_hotel'
$.get(url, data => {
    console.log(data)
    $('#body .hot-city-hotel>ul').html(
        data.data.map(value => {
            return `
            <li> ${value.cname}</li>
            `
        })
    )
})
getindex(1)





